<template>
  <div>
    <el-dialog
      title="具体信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>{{ dialogshow }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div style="margin: 10px 60px 10px">
      <!--<el-button @click="resetDateFilter">按日期查找</el-button>-->
      <!--<el-button @click="clearFilter">按内容查找</el-button>-->
      <!--<el-button @click="clearFilter">按学号查找</el-button>-->
      <!--<el-button @click="clearFilter">按XXX查找</el-button>-->
      <!--按日期查找-->
      <div class="block" style="display:inline-block; margin-right: 20px ">
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="按日期查找"
          :picker-options="pickerOptions"
        />
      </div>
      <!--按成果类型查找-->
      <div class="demo-input-suffix" style="display:inline-block; margin-right: 20px ">
        <el-input
          v-model="input"
          placeholder="按成果类型查找"
          prefix-icon="el-icon-search"
        />
      </div>
      <!--按关键词查找-->
      <div class="demo-input-suffix" style="display:inline-block; margin-right: 20px ">
        <el-input
          v-model="input"
          placeholder="按关键词查找"
          prefix-icon="el-icon-search"
        />
      </div>
      <!--扩展》按xxx查找-->
      <div class="demo-input-suffix" style="display:inline-block; margin-right: 20px ">
        <el-input
          v-model="input"
          placeholder="可扩展：按xxx查找"
          prefix-icon="el-icon-search"
        />
      </div>
      <el-button type="success">重置筛选条件</el-button>
    </div>

    <el-table
      ref="filterTable"
      :data="tableData"
      style="margin: 30px auto; width: 90%"
    >
      <el-table-column
        align="center"
        type="index"
        label="序号"
        width="100"
        height="45"
        style="padding-bottom: 20px;"
      />
      //奖项类型
      <el-table-column
        prop="type"
        label="奖项类型"
        width="160"
      />
      //奖项名称
      <el-table-column
        prop="name"
        label="奖项名称"
        width="200px"
      />
      //成果状态
      <el-table-column
        prop="tag1"
        label="状态"
        width="120px"
        :filters="[{ text: '已结束', value: '已结束' }, { text: '进行中', value: '进行中' }]"
        :filter-method="filterTag1"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="(scope.row.tag1 === '已结束') ?'plain': 'danger'"
            disable-transitions
          >{{ scope.row.tag1 }}
          </el-tag>
        </template>
      </el-table-column>
      //创建时间
      <el-table-column
        prop="date"
        label="创建时间"
        sortable
        width="160"
        column-key="date"
        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
        :filter-method="filterHandler"
      />
      //更新时间
      <el-table-column
        prop="date"
        label="更新时间"
        sortable
        width="160"
        column-key="date"
        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
        :filter-method="filterHandler"
      />
      //结果
      <el-table-column
        prop="result"
        label="结果"
        width="120"
      />
      //公示情况(!根据不同的公示情况显示公示界面)
      <el-table-column
        prop="publicity"
        label="公示情况"
        width="120"
      >
        <!--        <template slot-scope="scope">-->
        <!--        </template>-->
      </el-table-column>
      //操作
      <el-table-column
        align="left"
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-label type="text" size="small" style="color:#66b1ff" @click="handleClicksee(scope.row)">查看</el-label>
          /
          <el-label type="text" size="small" style="color:indianred" @click="handleClickedit(scope.row)">撤销</el-label>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 以下用于日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value1: '',
      value2: '',
      // 以下用于表格内容
      dialogVisible: false,
      dialogshow: '123',
      tableData: [{
        tag1: '已结束',
        date: '2016-05-02',
        result: '成功',
        publicity: '已公示',
        type: '国家奖学金',
        name: '2020年研究生国家奖学金',
        tag: '未读'
      }, {
        tag1: '进行中',
        date: '2016-05-04',
        result: '成功',
        publicity: '已公示',
        type: '上海市奖学金',
        name: '2019年上海市本科生奖学金',
        tag: '已读'
      }, {
        tag1: '已结束',
        date: '2016-05-01',
        result: '失败',
        publicity: '待公示',
        type: '优秀毕业生',
        name: '2020年优秀毕业生评选',
        tag: '处理中'
      }, {
        tag1: '进行中',
        date: '2016-05-03',
        result: '成功',
        publicity: '待公示',
        type: '社会赞助奖学金',
        name: '华特奖学金',
        tag: '已完成'
      }
      ]
    }
  },
  methods: {
    filterTag1(value, row) {
      return row.tag1 === value
    },
    filterTag(value, row) {
      return row.tag === value
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleClick(index, row) {
      index = index + 1
      this.$data.dialogVisible = true
      this.$data.dialogshow = '你点击的是第' + index + '行  内容为'
      this.$data.dialogshow += row.message
      console.log(row)
    }
  }
}
</script>

<style scoped>

</style>
